<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<audio src=""></audio>
		<progress value="50" width="100px" height="20px" max="100"></progress>
		
		<script type="text/javascript">
			
			var xhr = new XMLHttpRequest();
			var src = "http://jjjr.gitee.io/text-progress/Tony Igy - Astronomia - DFM.mp3";
			var progress = document.getElementsByTagName("progress")[0];
			
			var audioContext = new(window.AudioContext||window.webkitAudioContext)();
			console.log(audioContext)
			xhr.open("get",src,true);
			xhr.send();
			xhr.addEventListener("readystatechange",function(e){
				var res = e.target;
				if (res.readyState === 4) {
					if (res.state === 200) {
						console.log("请求成功");
					}
				}
			})
			xhr.addEventListener("progress",function(e){
				console.log(e)
			})
			
			xhr.onprogress = function(){
				if (event.lengthComputable) {
					var precentComplete = (event.loaded/event.total)*100+"px";
					
					progress.setAttribute("value",event.loaded);
					progress.setAttribute("max",event.total);
				}
			}
			
			//监听完成下载
			xhr.onload = function(event){
				//得到二进制类型文件后进行解码
				var data = xhr.response;
				console.log(data);
				audioContext.decodeAudioData(data,function(buffer){
					//创建内存音频资源
					var source = audioContext.createBufferSource();
					source.buffer=buffer;
					//链接
					source.connect(audioContext.destination);
					//循环
					source.loop=true;
					//播放
					source.start();
				},function(err){
					console.log(err);
				})
			}
		</script>
	</body>
</html>
